<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="./css/header.css">
	<link rel="stylesheet" href="./css/weibu.css">
	<!-- <link rel="stylesheet" href="./css/4.css">	 -->
	<link rel="stylesheet" href="./css/cpyfw.css">
	<link rel="stylesheet" href="./iconfont/iconfont.css">

	<title>产品与服务 - 爱宠医生 - 宠物医院一站式服务平台</title>
	<style>
	/* 初始化 */
		body,ul,li{margin: 0;padding:0;}
		li{list-style: none;}
		a{text-decoration: none;color:#333}
		body{font-size: 14px; font-family: 微软雅黑; background: #fff; min-width: 1200px;}
		h1,h2,p{margin:0px;font-family: 宋体;}
	</style>
</head>
<body>
	<div class="headers">
		<div class="logo">
			<div class="logo2">
				<img src="./img/logo.png" width="200px" height="50px">
				<h1 class="font">宠物医院一站式服务平台</h1>
			</div>
			<ul>
				<li><a href="./index.html">首页</a></li>
				<li><a href="./guanyuwomen.html">关于我们</a></li>
				<li class="index"><a href="./cpyfw.html">产品与服务</a></li>
				<li><a href="./zhaoxiannashi.html">招纳贤士</a></li>
				<li><a href="./lxwm.html">联系我们</a></li>
			</ul>					
		</div>
	</div>
	<div id="header">
		<div class="item item1">
			<div class="introduce">
				<div class="introduce1">
					<h1>爱宠医生</h1>
					<div class="slogan">宠物医生在线问诊平台</div>
					<ul class="list">
						<li>200多万注册用户</li>
						<li>免费医院推广</li>
						<li>区域定位推荐医生</li>
					</ul>
					<div class="btns">
						<div class="box" id="box-b">
							<a href="javascript:;" class="box-blue">
								<i class="iconfont">&#xe60b;</i>
								<span>用户版下载</span>
							</a>
							<div class="btn-po" style="display:none" id="btn-po1">
								<img src="./img/qrcode-inquiry-user.png" alt="">
								<span class="txt">扫一扫下载</span>
							</div>
						</div>
						<div class="box" id="box-g">
							<a href="javascript:;" class="box-green">
								<i class="iconfont">&#xe60b;</i>
								<span>用户版下载</span>
							</a>
							<div class="btn-po" style="display:none" id="btn-po2">
								<img src="./img/qrcode-inquiry-user.png" alt="">
								<span class="txt">扫一扫下载</span>
							</div>
							
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="item item2" style="display: none;">
			<div class="introduce">
				<div class="introduce2">
					<h1>爱宠采购</h1>
					<div class="slogan">宠物行业一站式B2B采购平台</div>
					<ul class="list">
						<li>10000家合作医院</li>
						<li>3000多种商品</li>
						<li>提供爱宠白条</li>
					</ul>
					<div class="btns">
						<div class="box">
							<a href="" class="box-blue">
								<i class="iconfont">&#xe60b;</i>
								<span>立即下载</span>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="item item3" style="display: none;">
			<div class="introduce">
				<div class="introduce2">
					<h1>爱宠分期</h1>
					<div class="slogan">宠物医院供应链金融服务平台</div>
					<ul class="list">
						<li>仪器采购免息分期</li>
						<li>药品采购白条授信</li>
						<li>最长2年分期 0利息</li>
					</ul>
					<img src="./img/qrcode-stages.jpg" alt="" class="tp">
				</div>
			</div>
		</div>
		<div class="item item4" style="display: none;">
			<div class="introduce">
				<div class="introduce2">
					<h1>爱宠医生</h1>
					<div class="slogan">宠物医生在线问诊平台</div>
					<ul class="list">
						<li>200多万注册用户</li>
						<li>免费医院推广</li>
						<li>区域定位推荐医生</li>
					</ul>
					<div class="btns">
						<div class="box">
							<a href="" class="box-blue">
								<i class="iconfont">&#xe60b;</i>
								<span>用户版下载</span>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="item item5" style="display: none;">
			<div class="introduce">
				<div class="introduce1">
					<h1>爱宠医生</h1>
					<div class="slogan">宠物医生在线问诊平台</div>
					<ul class="list">
						<li>200多万注册用户</li>
						<li>免费医院推广</li>
						<li>区域定位推荐医生</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<div id="iconList">
		<ul class="opts">
			<a href="javascript:foo(1)">
				<li class="opt item1" id="l1">
					<div class="mark"></div>
					<div class="title">爱宠就诊</div>
					<div class="event">宠物医生在线问诊平台</div>
				</li>
			</a>
			<a href="javascript:foo(2)">
				<li class="opt" id="l2">
					<div class="mark"></div>
					<div class="title">爱宠采购</div>
					<div class="event">宠物行业一站式<br>B2B采购平台</div>
				</li>
			</a>
			<a href="javascript:foo(3)">
				<li class="opt" id="l3">
					<div class="mark"></div>
					<div class="title">爱宠分期</div>
					<div class="event">宠物医院供应链<br>金融服务平台</div>
				</li>
			</a>
			<a href="javascript:foo(4)">
				<li class="opt" id="l4">
					<div class="mark"></div>
					<div class="title">爱宠就诊</div>
					<div class="event">宠物医生在线问诊平台</div>
				</li>
			</a>
			<a href="javascript:foo(5)">
				<li class="opt" id="l5"> 
					<div class="mark"></div>
					<div class="title">爱宠就诊</div>
					<div class="event">宠物医生在线问诊平台</div>
				</li>
			</a>
		</ul>
		
	</div>
	<div class="wei">
		<div class="wei2">
			<p>客服电话：021-50410251&nbsp; 联系我们：shichang@5ichong.com&nbsp;地址：上海浦东新区郭守敬路498号19号楼410室 </p>
			<p>爱宠医生 2015 © All Rights Reserved&nbsp;沪ICP备13024972号-1&nbsp;  公安备案号：31011502003238</p>
		</div>		
	</div>
	<script src="./js/jquery-1.8.3.min.js"></script>
	<script>
		//点击换图
		var item = document.getElementsByClassName('item');
		var opt = document.getElementsByClassName('opt');
		var bz=0;
		for (let i = 0; i < opt.length; i++) {			
            opt[i].onclick = function () {
            	for (var j=0;j<item.length;j++){
            		item[j].style.display = 'none';
            	}            	
                item[i].style.display = 'block';
                bz = i;               
            }
        } 
        // 改变class名
        function foo(x)
		{
		for (var i = 1; i <= 5; i++)
		if (x == i)
		document.getElementById("l" + i).setAttribute("class", "opt item1");
		else
		document.getElementById("l" + i).setAttribute("class", "opt");
		}
		//图片文字但如淡出
	</script>
	<script>
	    window.onload = function () {
	        var oDiv1 = document.getElementById('box-b');
	        var oDiv2 = document.getElementById('btn-po1');
	        var oDiv3 = document.getElementById('box-g');
	        var oDiv4 = document.getElementById('btn-po2');
	        oDiv1.onclick = function () {
	            oDiv2.style.display = oDiv2.style.display == 'block' ? 'none' : 'block';
	        }
	        oDiv3.onclick = function () {
	            oDiv4.style.display = oDiv4.style.display == 'block' ? 'none' : 'block';
	        }
	    }
	</script>


	
</body>
</html>